import React, {useEffect, useState} from "react"
import { Routes, Route, useLocation} from "react-router-dom"
import { ConfigProvider } from 'zarm'
import zhCN from 'zarm/lib/config-provider/locale/zh_CN'
import 'zarm/dist/zarm.css'
import NavBar from '@/components/NavBar';


import routes from '@/router'

function App() {
  const location = useLocation() // 拿到 location 实例
  const { pathname } = location // 获取当前路径
  console.log(pathname)
  const needNav = ['/', '/data', '/user'] // 需要底部导航栏的路径
  const [showNav, setShowNav] = useState(false) //是否展示Nav
  useEffect(() => {
    var incloud = needNav.includes(pathname);
    console.log(incloud)
    setShowNav(incloud)
  }, [pathname])// [] 内的参数若是变化，便会执行上述回调函数=

  return <>
  <ConfigProvider primaryColor={'#007fff'} locale={zhCN}>
    <>
     <Routes>
      {routes.map(route => <Route exact key={route.path} path={route.path} element={<route.component />} />)}
     </Routes>
     
    </>
  </ConfigProvider>
  <NavBar showNav={showNav} />
  </>
}

export default App
